<template>
  <div class="flex container">
    <div id="demo" class="container"></div>
  </div>
</template>
<script setup lang="ts">
import * as echarts from 'echarts'
import { onMounted } from 'vue'

//计算最大值
function calMax(arr) {
  let max = 0
  arr.forEach((el) => {
    el.forEach((el1) => {
      if (!(el1 === undefined || el1 === '')) {
        if (max < el1) {
          max = el1
        }
      }
    })
  })
  let maxint = Math.ceil(max / 9.5) //不让最高的值超过最上面的刻度
  let maxval = maxint * 10 //让显示的刻度是整数
  return maxval
}

//计算最小值
function calMin(arr) {
  let min = 0
  arr.forEach((el) => {
    el.forEach((el1) => {
      if (!(el1 === undefined || el1 === '')) {
        if (min > el1) {
          min = el1
        }
      }
    })
  })
  let minint = Math.floor(min / 10)
  let minval = minint * 10 //让显示的刻度是整数
  return minval
}

var data1 = [59357.9, 52789.77, 24837.98, 14345.02, 2291.93],
  data2 = [-12108.81, 701.43, 1280.75, -2109.83, -18693.95],
  data3 = [0, -11.07, -52.95, -42.25, -84.02],
  data4 = [0, 105.79, 82.59, -264.73, -786.04]

var Min1 = calMin([data1, data2]),
  Min2 = calMin([data3, data4]),
  Max1 = calMax([data1, data2]),
  Max2 = calMax([data3, data4])

const option = {
  grid: { left: '100', right: '100', bottom: '100', top: '100' },
  color: ['#0698d6', '#fd8246', '#d773b4', '#41ac7c', '#e86367', '#aada9c'],
  tooltip: { trigger: 'axis', axisPointer: { type: 'cross', crossStyle: { color: '#999' } } },
  legend: { data: ['营业收入', '净利润', '营业收入同比增长率', '净利润同比增长率'] },
  xAxis: [
    {
      type: 'category',
      show: false,
      lineWidth: 0,
      axisPointer: {
        type: 'shadow'
      },
      data: ['2013-12-31', '2014-12-31', '2015-12-31', '2016-12-31', '2017-12-31']
    }
  ],
  yAxis: [
    {
      name: '单位：万元',
      nameTextStyle: { color: '#999999' },
      type: 'value',
      axisLine: { show: false },
      axisTick: { show: false },
      axisLabel: { verticalAlign: 'bottom', color: '#999999' },
      min: Min1,
      max: Max1,
      splitNumber: 5,
      interval: (Max1 - Min1) / 5
    },
    {
      name: '单位：%',
      type: 'value',
      nameTextStyle: { color: '#999999' },
      axisLine: { show: false },
      axisTick: { show: false },
      axisLabel: { verticalAlign: 'bottom', color: '#999999' },
      min: Min2,
      max: Max2,
      splitNumber: 5,
      interval: (Max2 - Min2) / 5
    }
  ],
  series: [
    { name: '营业收入', type: 'bar', barGap: 0, barWidth: 30, data: data1 },
    { name: '净利润', type: 'bar', barGap: 0, barWidth: 30, data: data2 },
    { name: '营业收入同比增长率', type: 'line', yAxisIndex: 1, data: data3 },
    { name: '净利润同比增长率', type: 'line', yAxisIndex: 1, data: data4 }
  ]
}
onMounted(() => {
  echarts.init(document.getElementById('demo')).setOption(option)
})
</script>
<style lang="scss" scoped>
.container {
  width: 100%;
  height: 100%;
  position: relative;
}
.flex {
  display: flex;
}
.flex-column {
  flex-direction: column;
}
.flex-1 {
  flex: 1;
}
</style>
